<template>
  <van-popup
    v-model="dialogShow"
    closeable
    position="bottom"
    :style="{ height: '80%' }"
  >
    <div class="popup-title">选择质量隐患区域</div>
    <div class="popup-content">
      <div class="risk">
        <div>
          <van-search
            class="info_search"
            @search="onSearch"
            @clear="clearSearch"
            v-model="Value"
            placeholder="搜索"
          />
        </div>
        <van-list
          style="margin-top: 5px"
          :finished="finished"
          v-model="loading"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="dep_item">
            <div
              class="dep_item_detail"
              v-for="(item, index) in list"
              :key="index"
            >
              <div @click="handleclick(item)">
                <div class="dep_name">
                  {{ item.DAName }}
                </div>
                <div class="dep_sort">
                  {{ item.OrgName }}
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    show: {},
    datas: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      active: 0,
      loading: false,
      finished: false,
      list: [],
      border: false,
      Value: "",
      filter: {
        page: -1,
        dataType: "List",
        conditions: [],
      },
      finished1: false,
      dangerList: [],
      finished2: false,
      userList: [],
      finished3: false,
      equipmentList: [],
      equipmentType: [],
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
  },
  methods: {
    onSearch() {
      var conditions = [
        {
          DataType: "string",
          IsTemp: false,
          Name: "DAName",
          Operator: "like",
          Value: "",
        },
      ];
      conditions.forEach((item) => {
        item.DisplayName = this.Value;
        item.Value = this.Value;
      });
      this.filter.page = 0;
      this.filter.conditions = JSON.stringify(conditions);
      this.getDangerArea();
    },
    clearSearch() {
      this.filter = {
        page: 0,
        dataType: "List",
        conditions: "",
      };
      this.getDangerArea();
    },
    onLoad() {
      ++this.filter.page;
      this.getDangerArea();
    },
    // 选择隐患区域
    getDangerArea() {
      this.loading = true;
      this.$axios
        .get("/SYDangerArea/GetPageData", {
          params: this.filter,
        })
        .then((res) => {
          this.loading = false;
          if (!res.data.HasNextPage) {
            this.finished = true;
          }
          if (this.filter.page == 0) {
            this.list = res.data.Data;
          } else {
            this.list = this.list.concat(res.data.Data);
          }
          this.filter.page = res.data.PageIndex;
        });
    },
    handleclick(item) {
      this.$emit("callback", item);
    },
  },
};
</script>

<style lang="less">
.risk {
  height: 100vh;
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.all_dep {
  background-color: #ffffff;
  padding: 10px;
  text-align: center;
}
.dep_item {
  width: 100%;
  padding: 10px;
  background-color: #e8f1f8;
}
.dep_item_detail {
  /* margin: 10px;*/
  padding: 10px;
  border-radius: 5px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 10px;
  /* border-bottom: 1px solid #e8f1f8;*/
  .dep_name {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .dep_sort {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    color: #666;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
  .dep_btm {
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    .btm_item {
      display: flex;
      align-items: center;
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
}
</style>
